<template>
  <div>
    <RouterLink to="/" :class="[
        prefixCls,
        layout !== 'classic' ? `${prefixCls}__Top` : '',
        'flex !h-[var(--logo-height)] items-center cursor-pointer pl-8px relative decoration-none overflow-hidden'
      ]">
        <img src="@/assets/imgs/logo.png" class="w-[calc(var(--logo-height)-10px)] h-[calc(var(--logo-height)-10px)]" />
        <div :class="[
          'ml-10px text-16px font-700',
          {
            'text-[var(--logo-title-text-color)]': layout === 'classic',
            'text-[var(--top-header-text-color)]':
              layout === 'topLeft' || layout === 'top' || layout === 'cutMenu'
          }
        ]">
            {{ title }}
        </div>
    </RouterLink>
  </div>

</template>

<script setup lang="ts">
import { useDesign } from '@/hooks/web/useDesign';
import { useAppStore } from '@/store/module/app';


const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('logo')

const appStore = useAppStore()
const layout = computed(() => appStore.getLayout)
const title = computed(() => appStore.getTitle)

</script>